<template>
  <div class="app-container">
    <div class="searchBox">
      <el-form :inline="true" :model="search" ref="searchForm">
        <el-form-item label="向导名称" prop="guideName">
          <el-input
            v-model="search.guideName"
            placeholder="请输入向导名称"
            clearable
            size="small"
            @keyup.enter.native="searchQuery"
          />
        </el-form-item>
        <el-form-item label="模块路径" prop="modulePath">
          <el-input
            v-model="search.modulePath"
            placeholder="请输入模块路径"
            clearable
            size="small"
            @keyup.enter.native="searchQuery"
          />
        </el-form-item>
        <el-form-item label="触发类型" prop="triggerType">
          <el-select
            v-model="search.triggerType"
            placeholder="请选择触发类型"
            clearable
            size="small"
          >
            <el-option
              v-for="item in controlData.triggerTypes"
              :key="item.key"
              :label="item.key"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-top: -2px">
          <el-button type="primary" @click="searchQuery">查询</el-button>
          <el-button
            type="info"
            @click="
              search = {};
              searchQuery();
            "
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <!-- useFormPage情况下，formPage不指定，默认取当前目录下的create -->
    <qm-table
      :data="query"
      keyProp="guideId"
      :formOptions="{ labelWidth: '120px' }"
      :modalOptions="{ height: 630 }"
      menuType="text"
      useFormPage
      :showCheckbox="false"
      :showOrder="true"
      :formPage="{
        create: '/admin/guide/create',
        view: '/admin/guide/create',
        edit: '/admin/guide/create'
      }"
    >
      <qm-table-column field="guideName">向导名称</qm-table-column>
      <qm-table-column field="modulePath">模块路径</qm-table-column>
      <qm-table-column
        field="triggerType"
        fieldType="enum"
        :enumOptions="controlData.triggerTypes"
      >
        触发类型
      </qm-table-column>
      <qm-table-column field="isEnabled" fieldType="yesno" width="100px">
        是否启用
      </qm-table-column>
      <qm-table-column
        field="guideType"
        fieldType="enum"
        :enumOptions="controlData.guideTypes"
      >
        向导类型
      </qm-table-column>
    </qm-table>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import store from "@/store";

export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      model: "/system/guide/getListModel",
      query: "/system/guide/query",
      save: "/system/guide/save",
      delete: "/system/guide/delete",
      entity: "/system/guide/getEntity"
    };
  }

  onBeforeSave(postModel) {
    const { steps, hints, guideAttr, guideEvents, userIds } = postModel.model;
    steps.forEach(item => {
      delete item._XID;
    });
    postModel.steps = JSON.stringify(steps);
    postModel.hints = hints;
    postModel.userIds = JSON.stringify(userIds);
    postModel.guideAttr = guideAttr;
    postModel.guideEvents = guideEvents;
    delete postModel.model.steps;
    delete postModel.model.hints;
    delete postModel.model.userIds;
    delete postModel.model.guideAttr;
    delete postModel.model.guideEvents;
  }

  onAfterRemove() {
    // 重新拉取向导信息
    store.dispatch("loadCurrNotTriggerGuide");
  }

  afterSave() {
    // 重新拉取向导信息
    store.dispatch("loadCurrNotTriggerGuide");
  }

  mixin() {
    return {
      data() {
        return {};
      },
      methods: {}
    };
  }
}
</script>

<style scoped lang="scss"></style>
